<template>
  <div class="reserve">
    <van-nav-bar class="navbar" :title="shopName" left-arrow @click-left="onClickLeft" />
    <!-- 选择日期 -->
    <van-tabs @click="selectDate">
      <van-tab title="今天" :name="date"></van-tab>
      <van-tab :title="currentDate" :name="currentDate"></van-tab>
    </van-tabs>
    <!-- 选择时间 -->
    <van-tabs :swipe-threshold="threshold" swipeable v-model="timeActive">
      <van-tab
        :title="item.startEndTime"
        :name="item.dinnerId"
        v-for="(item,index) in mealSortList"
        :key="index"
      ></van-tab>
    </van-tabs>
    <BetterScroll :dishList="dishList" :childData="childData" @success-data="successData"></BetterScroll>
    <GoodsAction :paramSubmitData="paramSubmitData" @handled-data="handleData"></GoodsAction>
    <!-- 日期插件 -->
    <van-popup v-model="dateShow" position="bottom">
      <van-datetime-picker
        v-model="currentDateModal"
        type="date"
        @cancel="cancel"
        @confirm="confirm"
      />
    </van-popup>
  </div>
</template>

<script>
import BetterScroll from "../components/better-scroll";
import GoodsAction from "../components/goodsAction";
export default {
  data() {
    return {
      // 选择日期
      dateActive: 0,
      date: this.$moment(new Date()).format("YYYY-MM-DD"),
      currentDate: this.$moment(new Date())
        .add(1, "days")
        .format("YYYY-MM-DD"),
      currentDateModal: new Date(new Date().getTime() + 24 * 60 * 60 * 1000), //明天日期
      paramDate: this.$moment(new Date()).format("YYYY-MM-DD"),
      dateShow: false,
      // 选择时间
      timeActive: 0,
      threshold: 2,
      shopId: this.$route.query.shopId, //门店id
      shopName: this.$route.query.shopName, //门店名称
      mealSortList: [], //餐别列表
      dishList: [], // 菜肴列表
      paramSubmitData: { totalPrice: 0 }, //提交数据
      childData: {} //购物车返回数据（填坑）
    };
  },
  components: {
    BetterScroll,
    GoodsAction
  },
  computed: {},
  watch: {
    // 餐别改变
    timeActive(val) {
      this.getDish(val, this.paramDate);
    }
  },
  created() {
    this.getMealSortList();
  },
  methods: {
    // 返回
    onClickLeft() {
      let that = this;
      this.$router.go(-1);
    },
    // 选择日期
    selectDate(name, title) {
      this.paramDate = name;
      if (name != this.$moment(new Date()).format("YYYY-MM-DD")) {
        this.getDish(this.timeActive, this.paramDate);
        this.dateShow = true;
      }
    },
    // 日期确定
    confirm() {
      this.currentDate = this.$moment(this.currentDateModal).format(
        "YYYY-MM-DD"
      );
      this.paramDate = this.$moment(this.currentDateModal).format("YYYY-MM-DD");
      this.getDish(this.timeActive, this.paramDate);
      this.dateShow = false;
    },
    // 日期取消
    cancel() {
      this.dateShow = false;
    },
    // 获取餐别列表
    getMealSortList() {
      let that = this;
      let url = "dish/api/v1/reserve/getDinnerTypeList";
      let param = {
        shopId: that.shopId
      };
      that.$ajax.post(url, that.qs.stringify(param)).then(res => {
        if (res.status == 200) {
          for (let i in res.data) {
            // 餐别开始时间
            let start = res.data[i].startTime;
            let startHour =
              parseInt(start / 60) >= 10
                ? parseInt(start / 60)
                : "0" + parseInt(start / 60);
            let startMin = start % 60 >= 10 ? start % 60 : "0" + (start % 60);
            let startTime = startHour + ":" + startMin;
            // 餐别结束时间
            let end = res.data[i].endTime;
            let endHour =
              parseInt(end / 60) >= 10
                ? parseInt(end / 60)
                : "0" + parseInt(end / 60);
            let endMin = end % 60 >= 10 ? end % 60 : "0" + (end % 60);
            let endTime = endHour + ":" + endMin;
            // 添加到返回字段
            res.data[i].startEndTime =
              startTime + "-" + endTime + " " + res.data[i].dinnerName;
          }
          that.mealSortList = res.data;
        }
      });
    },
    // 通过餐别id，获取所有可用分类及菜肴
    getDish(dinnerId, date) {
      let that = this;
      let url = "dish/api/v1/reserve/getFoodInTypes";
      let param = {
        shopId: that.shopId,
        supplierId: this.$store.state.common.supplierId,
        dinnerId: dinnerId,
        date: date
      };
      that.$ajax.post(url, that.qs.stringify(param)).then(res => {
        if (res.status == 200) {
          that.dishList = res.data;
          for (let i in that.dishList) {
            for (let j in that.dishList[i].bcFoodVoList) {
              that.$set(that.dishList[i].bcFoodVoList[j], "copies", 0);
            }
          }
        }
      });
    },
    // 联动菜单传回的数据
    successData(data) {
      let that = this;
      data.payType = 1; //支付方式（1：支付宝（默认）2：微信3：饭卡 4：现金）
      // data.orderType=1 //(1:堂食(默认) 2:自提 3：外卖4：餐柜)
      data.orderSource = 21; //订单来源:21：支付宝生活号(默认) 12:预订终端 22:支付宝小程序 31:微信公众号 32:微信小程序
      data.shopId = this.shopId; //门店ID
      data.shopName = this.shopName; //门店名称
      data.dinnerTypeId = this.timeActive; //餐别id
      for (let i in that.mealSortList) {
        if (that.timeActive == that.mealSortList[i].dinnerId) {
          data.dinnerTypeName = that.mealSortList[i].dinnerName; //餐别名称
          data.dinnerTimeStart = that.mealSortList[i].startTime; //就餐开始时间
          data.dinnerTimeEnd = that.mealSortList[i].endTime; //就餐结束时间
        }
      }
      data.dinnerDate = that.paramDate; //就餐时间yyyy-MM-dd
      this.paramSubmitData = data;
    },
    // 选购菜单传回数据
    handleData(data) {
      this.childData = data;
    }
  }
};
</script>

<style>
.van-tabs__wrap {
  border-bottom: 1px solid #cdcdcd;
}
.van-tabs__line {
  height: 1px !important;
  background-color: #0a7fe5 !important;
}
</style>
<style scoped>
.navbar {
  border-bottom: 1px solid #cdcdcd;
}
</style>